<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客房列表页面</title>
    <style>
        tr{
            text-align: center;
        }
    </style>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="./element-ui-2.13.0/lib/theme-chalk/index.css">
    <script src="./element-ui-2.13.0/lib/index.js"></script>

</head>
<body>
<div id="app">
   
    <h2 align="center">客房列表</h2>
    <el-button type="primary" @click="toAdd()" icon="el-icon-plus">添加</el-button>
    <hr>
    <el-table :data="list" style="width: 100%" stripe border>
        <el-table-column type="selection" width="55">
    </el-table-column>
        <el-table-column prop="rid" label="房间房号" width="180"></el-table-column>
        <el-table-column prop="rname" label="房间名称" width="180"></el-table-column>
        <el-table-column prop="price" label="房间单价" width="180"></el-table-column>
        <el-table-column prop="type" label="房间类型" width="180"></el-table-column>
        <el-table-column prop="state" label="房间状态" width="180"></el-table-column>
        <el-table-column prop="mark" label="房间简介" width="180"></el-table-column>
        

    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
        
    </el-table>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>
            <el-form :model="room" :rules="rules" ref="regist" label-width="100px" class="demo-ruleForm">
                <el-form-item label="房间名称" prop="rname">
                    <el-input v-model="room.rname" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="房间价格" prop="price">
                    <el-input v-model="room.price" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="房间类型" prop="type">
                    <el-select v-model="room.type" placeholder="请选择房间类型">
                        <el-option label="大床房" value="大床房"></el-option>
                        <el-option label="标间" value="标间"></el-option>
                        <el-option label="豪华套房" value="豪华套房"></el-option>
                        <el-option label="普通大床房" value="普通大床房"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间状态" prop="state">
                    <el-radio-group v-model="room.state">
                        <el-radio label="空闲"  value="空闲" >空闲</el-radio>
                        <el-radio label="入住" value="入住" >入住</el-radio>
                        <el-radio label="维修" value="维修" >维修</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="房间简介" prop="mark">
                    <el-input type="textarea" v-model="room.mark" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('regist')">修改</el-button>
                    <el-button @click="dialogVisible = false">返回</el-button>
                </el-form-item>
            </el-form>
        </span>
        
    </el-dialog>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            list:[],
            dialogVisible:false,
            room: {
                    rid:"",
                    rname: "",
                    price: "",
                    type: "",
                    state: "",
                    mark: ""
                },
                rules: {
                    rname: [
                        { required: true, message: '请输入房间名称', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: '请输入房间价格', trigger: 'blur' }
                    ],
                    mark: [
                        { required: true, message: '请输入房间简介', trigger: 'blur' }
                    ],


                }
        },
        methods:{
            toAdd(){
                location.href="addRoom.html"
            },
             //选中复选框时触发
             handleSelectionChange(val) {
                    this.multipleSelection = val;
                    console.log(val[0].name)
                },
                //单击编辑时候触发
                handleEdit(index, row) {
                    console.log(index, row);
                    this.dialogVisible=true;
                    this.room=row;
                },
                //单击删除时候触发
                handleDelete(index, row) {
                    console.log(index, row);
                    this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //请求服务器删除
                        axios({
                            url:"http://localhost:8080/hotel/room?method=deleteRoom&rid="+row.rid,
                            method:"post"
                        }).then(resp =>{
                            if (resp.data.code == 200) {
                                    this.$message({
                                        message: resp.data.msg,
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: resp.data.msg,
                                        type: 'warning'
                                    });
                                }

                                setTimeout(() => {
                                    location.href = "index.html";
                                }, 1000);
                        })
                        
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
            //请求服务器查询所有数据
            selectAll(){
                axios({
                    url:"http://localhost:8080/hotel/room?method=selectAll",
                    method:"get"
                }).then(resp=>{
                    console.log(resp.data);
                    this.list=resp.data.data;
                })

            },
           
            //提交表单
            submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            //axios请求服务器做添加操作
                            //获取数据
                            var params = new URLSearchParams();
                            for(var key in this.room){
                                params.append(key,this.room[key])
                            }

                            axios({
                                url: "http://localhost:8080/hotel/room?method=updateRoom",
                                method: "post",
                                data: params
                            }).then(resp => {
                                if (resp.data.code == 200) {
                                    this.$message({
                                        message: resp.data.msg,
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: resp.data.msg,
                                        type: 'warning'
                                    });
                                }

                                setTimeout(() => {
                                    location.href = "index.html";
                                }, 1000);
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },

        },
        created(){
            this.selectAll();
        }
    })
</script>
</body>
</html>